<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8"/>
    <title>条形码生成</title>
</head>

<body >

<div class="page" id="app">
    <el-input
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4}"
            placeholder="请输入条形码内容"
            v-model="content">
    </el-input>
    <el-row>
        <el-button type="success" @click="createImageQRCodeForWeb">确定生成</el-button>
    </el-row>
    <img v-if="imgPath != ''"  :src="imgPath"/>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.7.0-alpha.4/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<script>
    let vue = new Vue({
        el:"#app",
        data:{
            content: '',
            imgPath:''
        },
        methods:{
            createImageQRCodeForWeb() {
                if (this.content == '') {
                    alert("请先输入内容")
                    return
                }
                axios.get('/zing/bar?content=' + this.content).then((res)=>{
                    if (res.data.success) {
                        console.log(res.data.data)
                        this.imgPath = res.data.data
                    } else {
                        alert("上报失败 " + res.data.errorMsg)
                    }

                })
            },
        }
    });

</script>

</body>
<style>
    .page{
        text-align: center;
    }

</style>
</html>